<template>
  <div class="content" v-if="isShow">
    <MyPanel
      style="grid-area: part1"
      title="运营统计"
    >
      <template #content>
        <OperateStatic />
      </template>
    </MyPanel>
    <MyPanel style="grid-area: part3" title="线路概览">
      <template #content>
        <LineScan />
      </template>
    </MyPanel>
    <MyPanel style="grid-area: part5" title="告警趋势">
      <template #content>
        <HistoryWarning />
      </template>
    </MyPanel>
    <MyPanel style="grid-area: part4" title="地铁活动">
      <template #content>
        <SubwayActivity />
      </template>
    </MyPanel>
    <MyPanel style="grid-area: part6" title="客流指标">
      <template #content>
        <GuestsRate />
      </template>
    </MyPanel>
    <MyPanel style="grid-area: part7" title="实时影像">
      <template #content>
        <HlsView />
      </template>
    </MyPanel>
  </div>

  <!-- <div
    style="position: absolute; z-index: 100"
    class="router-wrapper"
  >
    <router-view></router-view>
  </div> -->
</template>

<script setup>
import MyPanel from "../components/MyPanel.vue";
import HistoryWarning from "../components/charts/HistoryWarning.vue";
import HlsView from "../components/charts/HlsView.vue";
import LineScan from "../components/charts/LineScan.vue";
import OperateStatic from "../components/charts/OperateStatic.vue";
import GuestsRate from "../components/charts/GuestsRate.vue";
import SubwayActivity from "../components/charts/SubwayActivity.vue";

import { watch, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const isShow = ref(true);

watch(route, (value) => {
  if (value.fullPath.includes("/station_manage")) {
    isShow.value = false;
  } else {
    isShow.value = true;
  }
});
</script>

<style scoped>
.content {
  width: 100%;
  height: calc(100% - 8.698vw);
  padding: 0 0.833vw;
  position: absolute;
  left: 0;
  top: 4.219vw;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 0.8fr 1.4fr 0.8fr;
  grid-row-gap: 16px;
  grid-template-areas:
    'part1 part2 part3'
    'part4 part2 part5'
    'part6 part2 part7';
  pointer-events: none;
}

.router-wrapper {
  width: 100%;
  /* 注意calc计算符号要保留空格 */
  height: calc(100% - 90px);
}
</style>
